<html>
	<head>
		<meta
		  name="viewport"
		  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
		/>
		<meta name="referrer" content="no-referrer">
		<script type="text/javascript" src="js/hls.min.js"></script>
		<script type="text/javascript" src="js/flv.min.js"></script>
		<script type="text/javascript" src="js/yb-player-gesture.js"></script>
		<script type="text/javascript" src="js/yb-player-danmu.js"></script>
		<script type="text/javascript" src="js/yb-player.js"></script>
		<script type="text/javascript" src="../js/uni-webview-js@1.5.4.js"></script>
		
		<link rel="stylesheet" href="css/yb-player.css" />
		<link rel="stylesheet" href="css/yb-player-plugin.css" />
		<title>短视频</title>
		<style>
			html, body {
				padding: 0;
				margin: 0;
				background-color: #000;
				width: 100vw;
				height: 100vh;
			}
			.yb-player {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
			}
			
			.video-wrapper {
				flex: 1;
				height: 0;
			}
			
			.video_info {
				color: #fff;
				display: flex;
				flex-direction: column;
				max-width: 80%;
				margin-left: 15px;
				position: absolute;
				bottom: 50px;
				left: 0;
				right: 0;
			}
			.video_info span {
				font-size: 14px;
				margin-bottom: 10px;
			}
			.video_info span:last-child {
				margin-bottom: 20px;
			}
			.video_info .subtitle {
				color: #ddd;
			}
			.video_info .description {
				color: #999;
			}
			
			.controls {
				position: relative;
				z-index: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 10px 15px;
				color: #fff;
			}
			.controls .btn {
				margin-left: 10px;
			}
			.controls_time {
				flex: 1;
				margin-left: 10px;
				margin-top: -2px;
			}
			.controls svg {
				width: 25px;
				height: 25px;
				fill: #fff;
			}
			
		</style>
	</head>
	<body>
		<!-- Specify the player container -->
		<div id="yb-player" class="yb-player">
			
		</div>
		<script>
			var mp
			//开启全屏按钮
			var openfullIcon = `
				<svg viewBox="0 0 24 24">
				    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
				</svg>
			`
			//播放按钮
			var playIcon = `
				<svg viewBox="0 0 24 24">
				    <path d="M8 5v14l11-7z"/>
				</svg>
			`
			//暂停按钮
			var pauseIcon = `
				<svg viewBox="0 0 24 24">
				    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
				</svg>
			`
			//下载图标
			var downloadIcon = `
				<svg viewBox="0 0 24 24">
				    <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
				</svg>
			`
			var voiceIcon = `
				<svg viewBox="0 0 24 24">
				    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
				</svg>
			`
			function renderVideo (slide) {
				var container = document.getElementById('yb-player')
				container.innerHTML = `
					<div class="video-wrapper"></div>
					<div class="video_info">
						<span class="title" style="display: ${slide.title ? 'inline' : 'none'}">${slide.title}</span>
						<span class="subtitle" style="display: ${slide.subtitle ? 'inline' : 'none'}">${slide.subtitle}</span>
						<span class="description" style="display: ${slide.description ? 'inline' : 'none'}">${slide.description}</span>
					</div>
					<div class="controls">
						<span class="controls_toggle">
							${playIcon}
						</span>
						<span class="controls_time">加载中</span>
						<span class="controls_more">
							${YbPlayer.moreIcon}
						</span>
						<span class="btn controls_voice">
							${voiceIcon}
						</span>
						<span class="btn controls_screen">
							${openfullIcon}
						</span>
					</div>
				`
			}
			
			function setVideo (arg) {
				var params = JSON.parse(decodeURIComponent(arg))
				renderVideo(params)
				var src = params.src
				var poster = params.poster
				var type = params.type
				var title = params.title
				var works = params.works
				var workIndex = params.workIndex
				var initialVolume = params.initialVolume
				var initialLight = params.initialLight
				var isLive = typeof params.isLive != 'undefined' ? params.isLive : true
				if ( mp ) {
					mp.unloadGestureEvent()
					mp.unloadVideo()
					mp.unload()
				}
				mp = new YbPlayer({
					container:'.video-wrapper',
					src,
					title,
					poster,
					type,
					loop: false,
					isLive,
					height: '100%',
					works,
					workIndex,
					custom: {
						gesture: {
							initialVolume,
							initialLight
						}
					},
					decoder: {
						hls: {
							loader: Hls
						},
						flv: {
							loader: flvjs
						}
					}
				})
				mp.load()
				mp.loadVideo()
				mp.loadGestureEvent(true)
				var toggleEl = document.getElementsByClassName('controls_toggle')[0]
				var screenEl = document.getElementsByClassName('controls_screen')[0]
				var timeEl = document.getElementsByClassName('controls_time')[0]
				var voiceEl = document.getElementsByClassName('controls_voice')[0]
				var moreEl = document.getElementsByClassName('controls_more')[0]
				mp.on('singleclick', function () {
					if ( !mp.getFullscreen() ) mp.toggle()
				})
				mp.on('play', function () {
					toggleEl.innerHTML = pauseIcon
				})
				mp.on('pause', function () {
					toggleEl.innerHTML = playIcon
				})
				mp.on('loadedmetadata', function () {
					if ( isLive ) timeEl.innerHTML = '直播中 · 00:00'
				})
				mp.on('timeupdate', function () {
					if ( isLive ) timeEl.innerHTML = '直播中 · ' + YbPlayer.timeFormat(mp.video.currentTime)
				})
				mp.on('fullscreenchange', function() {
					if ( !mp.getFullscreen() ) mp.setConfig('controls', false)
				});
				screenEl.onclick = function () {
					mp.openFullscreen('auto')
					mp.setConfig('controls', true)
				}
				toggleEl.onclick = function () {
					mp.toggle()
				}
				voiceEl.onclick = function () {
					uni.postMessage({ data: { voice: 1 } });
				}
				moreEl.onclick = function () {
					uni.postMessage({ data: { more: 1 } });
				}
			}
			
			//消息提示
			function showToast (arg) {
				var data = JSON.parse(decodeURIComponent(arg))
				mp?.showToast(data)
			}
			
			window.onload = function () {
				uni.postMessage({ data: { ready: 1 } });
			}
		</script>
	</body>
</html>